<template>
  <div class="w-100">
    <div class="mb-3" v-for="(item,index) in dataList" :key="index">
      <div class="titleClass mb-2">{{"数据"+item.seq}}</div>
      <el-button type="primary" size="mini" @click="openCheckDataDialog(index)">添加数据{{item.seq}}</el-button>
      <el-table
        :data="item.mapString1"
        border
        style="width: 100%;"
        class="mt-2"
      >
        <el-table-column type="index" label="序号" width="50" align="center"/>
        <el-table-column prop="dataValue" label="数据值" align="center"/>
        <el-table-column prop="dataValueName" label="数据值名称" align="center"/>
        <el-table-column prop="tagName" label="区域标签" align="center"/>
        <el-table-column prop="deviceName" label="设备名称" align="center"/>
        <el-table-column prop="parameterName" label="元素标签" align="center"/>
        <el-table-column label="数据类型" align="center">
          <template slot-scope="{row}">
            {{row.dataType=="0"?"设备数据":row.dataType=="1"?"聚合数据":"自定义运行数据"}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button type="danger" size="mini" @click="handlerDelete(scope.$index, scope.row, index)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 实列化 -->
    <yc-dialog ref="checkDataDialog" :dialogTitle="dialogTitle" :show-center="false" :modal="false" dialog-width="65%">
      <template #content>
        <instantiateTable :selectionOrRadio="'1'" ref="instantiateTable"></instantiateTable>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="checkDataSave">确定</el-button>
        <el-button @click="$refs.checkDataDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import instantiateTable from "@/views/dataManage/polymerizationData/instantiateTable.vue"

  export default {
    components: {
      ycDialog,
      instantiateTable
    },
    props: {
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        dialogTitle: "",
        addOrUpdateLoading: false
      }
    },
    watch: {
      dataList: {
        immediate: true, // 立即触发一次监听器，以便处理初始值
        handler(newVal) {
          if (Array.isArray(newVal) && newVal.length > 0) {
            for (let i = 0; i < newVal.length; i++) { // 修正循环条件
              const item = newVal[i]
              if (Array.isArray(item.list) && item.list.length > 0) {
                for (let k = 0; k < item.list.length; k++) {
                  const itemY = item.list[k]
                  // 如果需要，可以在此处处理 item.messages
                  itemY.messages = itemY.key || "" // 假设 key 是字符串或 null/undefined
                  itemY.seq = item.seq
                }
                item.mapString1 = item.list
              }
            }
          } else {
            console.log("No items available.")
          }
        }
      }
    },
    created() {
    },
    methods: {
      // 添加数据
      openCheckDataDialog(index) {
        this.dialogTitle = "数据元查询"

        this.instantiationThreeIndex = index ? index : 0

        this.addOrUpdateLoading = false
        this.$refs.checkDataDialog.dialogVisible = true
      },

      handlerDelete(indexY, row, index) {
        this.dataList[index].mapString1.splice(indexY, 1)
      },

      // 选择弹窗数据
      checkDataSave() {
        this.addOrUpdateLoading = true

        const tableData = this.dataList[this.instantiationThreeIndex].mapString1 ? this.dataList[this.instantiationThreeIndex].mapString1 : []
        const selectData = this.$refs.instantiateTable.selectedRows
        let tempArr = this.mergeAndDeduplicateByKey(tableData, selectData, "messages")
        console.log(tempArr,'tempArr')
        this.$set(this.dataList[this.instantiationThreeIndex], "mapString1", tempArr)

        this.$refs.checkDataDialog.dialogVisible = false
        this.addOrUpdateLoading = false
      },

      mergeAndDeduplicateByKey(arr1, arr2, key) {
        const combined = [...arr1, ...arr2]
        const uniqueItemsMap = new Map()

        combined.forEach(item => {
          if (!uniqueItemsMap.has(item[key])) {
            uniqueItemsMap.set(item[key], item)
          }
        })

        // 将Map的值转换为数组
        return Array.from(uniqueItemsMap.values())
      }
    }
  }
</script>

<style lang="scss" scoped>
  .titleClass {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }
</style>
